<template>
  <div>
    <section class="from-container">

    <!-- <el-button type="primary" size="mini" @click="add('add')">新增</el-button> -->
      <section class="right-but" style="display:flex;margin-bottom: 10px">
        <el-button type="text" style="margin-right:-13px"  @click="refreshList">
          <img style="width:44px;height:36px;" src="~@/assets/img/shuaxin.png" >
        </el-button>
        <PopoverBut ref="popoverBut"  class="selectBut" :checkedProps="checkedProps"  :options="options" @getCheckeds="handlerCloumn"></PopoverBut>
      </section>
    </section>
    <el-table v-loading="loading" size="mini" :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }" :row-class-name="tableRowClassName">
      <el-table-column type="index" width="70" label="序号"> </el-table-column>
      <el-table-column prop="names" label="分组名称">
          <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="handleCommand({method:'detail', row:scope.row})">{{scope.row.names}}</el-link>
          </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <section class="state normal" v-if="scope.row.state===1">
            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
          <section class="state empty" v-else>
            <span></span>{{$dictUtils.getDictLabel("state", scope.row.state, "")}}
          </section>
        </template>
        </el-table-column>
      <el-table-column prop="address" label="操作" width="244">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" @click="addChild(scope.row.id,scope.row.names,scope.row.parentIds,scope.row)">新增子级</el-link>
          <el-link type="primary" :underline="false" v-if="scope.row.id==='1'" @click="edit(scope.row.id,scope.row.names,scope.row.parentIds)">修改</el-link>
          <template v-for="item in $dictUtils.getDictList('state')">
              <el-link  type="primary" :underline="false" v-if="item.value!=='-1'&&hasPermission('truck:truck:edit')&& item.value!==(scope.row.state+'')&&scope.row.id!=='1'" @click="handleCommand({method:'editState', row:scope.row,item:item.value})">{{item.label}}</el-link>
          </template>
          <el-dropdown v-if="scope.row.id!=='1'" @command="handleCommand">
            <span class="el-dropdown-link" style="font-size:16px">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  :command="{method:'edit', row:scope.row}" @click="edit(scope.row.id,scope.row.names,scope.row.parentIds)">修改</el-dropdown-item>
                <el-dropdown-item v-if="hasPermission('truck:truck:del')&&scope.row.id!=='1'" :command="{method:'del', row:scope.row}">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <truckGroupForm ref="truckGroupForm" @refreshDataList="getGroupList1"></truckGroupForm>
    <DetailsForm ref="DetailsForm"></DetailsForm>

  </div>
</template>

<script>
  import DetailsForm from './detailsForm'
  import truckGroupForm from './truckGroupForm'
  import {
    getGroupList,
    modifyState,
    getTreeData
  } from '@/api/truck/truckGroup.js'
  import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    data () {
      return {
        // 查询参数
        params: {
          'parentId': 0,
          'delFlag': 0,
          pageSize: 1000
        },
        loading: false,
        checkedProps: options1,
        options: [],
        maps: new Map(),
        tableData1: [],
        value: true
      }
    },
    components: {
      truckGroupForm,
      DetailsForm,
      PopoverBut
    },
    methods: {
      //选择分组属性
      selectProperty(val){
        this.$store.commit('truck/setSelectCarGruop', val)
      },
      refreshList () {
        this.getList(this.params)
      },
      // 是否显示某列数据
      handlerCloumn (e) {
        this.checkedProps = e
      },
      getList (params) {
        this.loading = true
        getTreeData(params).then(res => {
          if (res.data.code === '200') {
            // for (let i = 0; i < res.data.result.list.length; i++) {
            //   this.$set(res.data.result.list[i], 'hasChildren', true)
            // }

            this.tableData1 = res.data.result

            this.params.pageSize = res.data.result.count
          }
          this.loading = false
        })
      },
      // 地区新增
      add () {
        this.$refs.truckGroupForm.init('add', {
          id: '',
          parent: {
            id: '',
            names: ''
          }
        })
      },
      handleCommand(command) {
        if (command.method === 'editState') {
          this.editState(command.item,command.row)
        } else if (command.method === 'del') {
          this.del(command.row.id)
        } else if (command.method === 'detail') {
          this.$nextTick(() => {
            this.$refs.DetailsForm.detailsVisible = true
            this.$refs.DetailsForm.groupName = command.row.names
            this.$store.commit('truck/setDetailId', command.row.id)
          })
        } else if (command.method === 'edit') {
            this.edit(command.row.id, command.row.names, command.row.parentIds)
        }
      },
      // 新增子级
      addChild (id, names, parentIds, row) {
        this.$refs.truckGroupForm.init('addChild', {
          id: id,
          parent: {
            id: id,
            names: names,
            parentIds: parentIds
          }
        })
      },
      // 修改
      edit (id, names, parentIds) {
        this.$refs.truckGroupForm.init('edit', {
          id: id,
          names: names,
          parent: {
            id: id,
            name: name,
            parentIds: parentIds
          }
        })
      },
      // 删除
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/truck/truckGroup/delete',
            method: 'delete',
            params: {
              'ids': ids
            }
          }).then((data) => {
            if (data && data.success) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
            this.getGroupList1()
          })
        })
      },
      // 状态修改
      editState (event, row) {
        console.log(row.children.length)
        let tip = '您是否要'+this.$dictUtils.getDictLabel("state", event, "")+'?'
        if(row.children.length>0){
          tip = '该分组下及其所有子分组都会被'+this.$dictUtils.getDictLabel("state", event, "")+'，确认'+this.$dictUtils.getDictLabel("state", event, "")+'吗?'
        }
        this.$confirm(tip, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
            modifyState({
              id: row.id,
              state: event
            }).then(res => {
              if (res.data.code === '200') {
                this.$message({
                  type: 'success',
                  message: '状态修改成功'
                })
                this.getGroupList1()
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.message
                })
              }
            })

        })

      },
      tableRowClassName ({
        row,
        rowIndex
      }) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      }, // 懒加载获取数据
      load (tree, treeNode, resolve) {
        const id = tree.id
        this.maps.set(id, {
          tree,
          treeNode,
          resolve
        })
        if (tree.hasChildren) {
          this.params = {
            'parentId': tree.id,
            'delFlag': 0,
            'pageSize': 100
          }
          getTreeData(this.params).then(res => {
            if (res.data.code === '200') {
              // for (let i = 0; i < res.data.result.list.length; i++) {
              //   this.$set(res.data.result.list[i], 'hasChildren', true)
              // }
              this.params.pageSize = res.data.result.count
              resolve(res.data.result.list)
            }
          })
        }
      },
      // 编辑后懒加刷新数据
      getGroupList1 (opt) {
        if (opt === 'add') {
          if (this.params.parentId === 0) {
            return
          }
          const { tree, treeNode, resolve } = this.maps.get(this.params.parentId)
          this.load(tree, treeNode, resolve)
        } else {
          if (this.maps.get(this.params.parentId)) {
            const { tree, treeNode, resolve } = this.maps.get(this.params.parentId)
            this.load(tree, treeNode, resolve)
          } else {
            this.getList(this.params)
          }
        }
      },
      handleSizeChange (val) {
      },
      handleCurrentChange (val) {
      }
    },
    mounted () {
      this.getList(this.params)
      this.$refs.popoverBut.disable = true
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-table .warning-row {
    background: #f7f7f7;
  }

  .from-container {
    margin-bottom: 10px;

  }

  .el-table .success-row {
    background: #f0f9eb;

  }
</style>
